<template>
    <el-card class="chief-complaint__container" shadow="hover">
        <div class="chief-complaint__item">
            <div class="chief-complaint__item-label">
                <span class="chief-complaint__sub-title">患者自述</span>
                <span class="chief-complaint__desc">请描述您当前的症状、体征及其性质、部位、程度及持续时间等。</span>
                <div class="btns">
                    <el-button @click="" type="primary" :disabled="thinking" circle :icon="Microphone">
                    </el-button>
                    <el-button @click="onClickCheck" type="primary" :disabled="thinking">
                        质量检查
                    </el-button>
                </div>
            </div>
            <el-input
                v-model="desc"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请在此处输入您的不适，包括症状、体征及其性质、部位、程度及持续时间等。"
            />
        </div>
    </el-card>
    <el-card class="chief-complaint__container" v-loading="thinking" shadow="hover">
        <!-- 完成度 -->
        <div class="chief-complaint__item">
            <el-progress
                :text-inside="true"
                :stroke-width="24"
                :percentage="completionDegree"
                :color="progressColors"
            />
        </div>
        <!-- AI提供的修改建议 -->
        <div class="chief-complaint__item">
            <div class="chief-complaint__item-label">
                <span class="chief-complaint__sub-title">修改建议</span>
                <span class="chief-complaint__desc">AI 为您提供了以下修改建议，根据建议补充自述内容有助于提高完成度。</span>
            </div>
            <el-table :data="editSuggestion" stripe style="width: 100%">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="suggestion" label="修改建议" />
            </el-table>
        </div>
        <!-- 修改后的主诉 -->
        <div class="chief-complaint__item">
            <div class="chief-complaint__item-label">
                <span class="chief-complaint__sub-title">主诉预览</span>
                <span class="chief-complaint__desc">AI 为您生成的主诉结果，这有助于后续诊断。</span>
            </div>
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                v-model="chiefComplaint"
                placeholder="AI 优化结果"
                resize="none" :disabled=true
            />
        </div>
        <div class="chief-complaint__btns">
            <el-button type="primary" :disabled="thinking" @click="onPrevStep">
                上一步
            </el-button>
            <el-button type="primary" :disabled="thinking || completionDegree < 60" @click="onNextStep">
                下一步
            </el-button>
        </div>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { usePatientStore } from '../../store/patient';
import { Microphone } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import CozeWorkflowRunner from '../../utils/coze';

// 事件
const emit = defineEmits(['nextStep', 'prevStep']);
// 患者信息（pinia）
const patientStore = usePatientStore();
const { patientInfo } = patientStore;
// 页面状态
const desc = ref('');
const editSuggestion = ref([]);
const chiefComplaint = ref('');
const completionDegree = ref(0);
const thinking = ref(false);
// 进度条颜色
const progressColors = [
    { color: "#f56c6c", percentage: 60 },
    { color: '#e6a23c', percentage: 80 },
    { color: '#5cb87a', percentage: 100 }
]

const onClickCheck = () => {
    checkComplaint(patientInfo, desc.value);
}

const checkComplaint = async (patientInfo, desc) => {
    const cozeRunner = new CozeWorkflowRunner();
    // 执行工作流
    ElMessage({message: '主诉质量检查中，请稍后...', type: 'info'});
    thinking.value = true;
    (async () => {
    try {
        
        const result = await cozeRunner.runWorkflow('7405011641680658469',
            {
                BOT_USER_INPUT:'',
                patientInfo,
                desc
            }
        );
        console.log('工作流执行结果:', result);
        // 将result.data从JSON字符串转换为对象
        const data = JSON.parse(result.data);
        // 更新页面数据
        editSuggestion.value = data.suggestion;
        chiefComplaint.value = data.refer;
        completionDegree.value = data.completionDegree;
        thinking.value = false;
        if(completionDegree.value < 60) {
            ElMessage({message: '主诉完成度低，请根据修改建议补充自述内容！', type: 'warning'});
        } else {
            ElMessage({message: '主诉质量检查完成！可进行下一步或继续补充内容！', type: 'success'});
        }
    } catch (error) {
        console.error('工作流执行失败:', error);
        ElMessage({message: '处理失败，请稍后再试！', type: 'error'});
    }
    })();
}

const onPrevStep = () => {
    emit('prevStep');
}

const onNextStep = () => {
    patientInfo.chiefComplaint = chiefComplaint.value;
    patientStore.setPatientInfo(patientInfo);
    emit('nextStep');
}
</script>

<style lang="scss" scoped>
.chief-complaint__item {
    margin-bottom: 20px;
    .chief-complaint__item-label {
        display: flex;
        align-items: center;
        margin: 15px 0;
        .chief-complaint__sub-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-right: 10px;
        }
        .chief-complaint__desc {
            font-size: 1rem;
            color: #666;
            margin-right: 10px;
        }
        .btns {
            margin-left: auto;
        }
    }
}

.chief-complaint__container {
    background-color: #fff;
    margin-top: 10px;
}

.chief-complaint__btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>